<template>
    <view class="my-content">
        <view class="header">
            <image class="my-photo" src="/static/default-avatar.png"></image>
            <text class="my-phone">{{ userInfo.driverPhone }}</text>
        </view>
		<BSseMessage @receiveOrder="handleReceiveOrder"/>
        <view class="meun-list">
            <view class="item" @click="goToPage('/pages/myInfo')">
                <text class="name">个人信息管理</text>
                <text class="iconfont icon-jinru icon-image"></text>
            </view>
			<view class="item" @click="goToPage('/pages/setOperatingCity')">
			    <text class="name">设置运营城市</text>
			    <text class="iconfont icon-jinru icon-image"></text>
			</view>
			<view class="item" @click="goToPage('/pages/myInfo')">
			    <text class="name">上传驾驶证信息</text>
			    <text class="iconfont icon-jinru icon-image"></text>
			</view>
            <view class="item" @click="goToPage('/pages/paymentSettings')">
                <text class="name">绑定车辆</text>
                <text class="iconfont icon-jinru icon-image"></text>
            </view>
            <view class="item" @click="goToPage('/pages/customerService')">
                <text class="name">客服</text>
                <text class="iconfont icon-jinru icon-image"></text>
            </view>
            <view class="item" @click="goToPage('/pages/userGuide')">
                <text class="name">司机指南</text>
                <text class="iconfont icon-jinru icon-image"></text>
            </view>
            <view class="item" @click="goToPage('/pages/termsAndRules')">
                <text class="name">服务协议与平台规则</text>
                <text class="iconfont icon-jinru icon-image"></text>
            </view>
			<view class="item" @click="goToPage('/pages/account')">
			    <text class="name">服务端地址(仅供测试)</text>
			    <text class="iconfont icon-jinru icon-image"></text>
			</view>
        </view>
        <view class="logout">
            <button class="btn btn__logout" @click="handleLogout">退出</button>
        </view>
    </view>
</template>

<script setup>
	import { useStore } from "vuex";
	import { onMounted, ref } from 'vue';
	import { ShowToast } from "../utils";
	import gdMapConf from '../config/gdMapConf';
	import { ApiGetUserInfo } from '../api/user';
	import BSseMessage from '../component/BSseMessage.vue';
	const userInfo = ref("");
	const $store = useStore();
	onMounted(()=>{
		getUserInfo($store.state.userInfo.driverId)
	})
    
	const getUserInfo = async(driverId) => {
		const {error, result} = await ApiGetUserInfo(driverId);
		if (result) {
		    userInfo.value = result;
		}
	}
	
	const handleReceiveOrder = (arg) =>{
			orderId = arg.orderId;
			uni.redirectTo({url:`/pages/orderDetail?orderId=${orderId}`});
		}
	
	const handleLogout = () =>{
	    $store.commit("setToken", '');
		$store.commit("setCity", gdMapConf.city);
	    uni.redirectTo({url:'/pages/login'});
	}
    const goToPage = (page) => {
	  getApp().globalData.userInfo = userInfo.value;
	  uni.navigateTo({
		url: page
	  });
    }
</script>

<style lang="scss" scoped>
    page {
        background: #eaeaeaba;
    }

    .my-content {
    	position: absolute;
        width: 100%;	
    	height: 100%;
    	background-color: #eaeaeaba;
    }

    .header {
        display: flex;
        align-items: center;
        height: 140rpx;
        margin: 10px;
        padding: 10px 20px;
        border-radius: 10px;
        background-color: white;
    }

    .my-photo{
        width: 100rpx;
        height: 100rpx;
    }

    .my-phone{
        font-size: 36rpx;
        margin-left: 30rpx;
        color: #555;
    }

    .meun-list {
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
        background: #fff;
        border-radius: 10px;
        margin: 10px;
        padding: 10px 20px;
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
            width: 100%;
        }
    }

    .logout{
        margin: 10px;
    }

    .btn{
        font-size: $uni-font-size-lg;
        margin-top: $uni-spacing-max;
        background: $uni-color-primary;
        color: $uni-text-color-inverse;
        &::after{
            display: none;
        }
        &__logout{
            background: $uni-color-error;
        }
    }
</style>
